<template>
	<view class="gouwudai">
		
		<view class="kong" v-if="data && data.list.length == 0">
			
			<view class="kong-view">您的购物袋为空</view>
			<view class="kong-view1">去挑几件中意的商品吧</view>
			<view class="kong-view2" @click="handleguangguang">去逛逛</view>
		</view>
		
		<view class="list" v-else>
			<view class="list-title">
				<text class="list-title-text">购物袋</text>
				<text class="list-title-text1">{{data?data.count : 0}}件商品</text>
			</view>
			<view class="list-item" v-for="(item,index) in data.list" :key="index">
				<view class="xz-view" v-if="item.checked" @click.stop="handlechecked(item.id,false)">
					<image class="list-item-image" src="../../static/xz_2@2x.png" mode="" ></image>
				</view>
				<view class="xz-view" v-else @click.stop="handlechecked(item.id,true)">
					<image class="list-item-image" src="../../static/xz_1@2x.png" mode="" ></image>
				</view>
				<view class="list-item-goodsphoto">
					<image class="list-item-goodsphoto-image" :src="item.picUrl" mode="aspectFill" @click="handledetail(item.goodsId)"></image>
					<image class="list-item-goodsphoto-image1" src="../../static/tx_sq@2x.png" mode="" v-if="item.inventory == 0"></image>
				</view>
				<view class="list-item-box">
					<view class="list-item-box-view">
						<text>{{item.goodsName}}</text>
						<view class="list-item-box-view-del" @click="handledel(item.id)">
							<image src="../../static/gwd_sc@2x.png" mode=""></image>
						</view>
					</view>
					<view class="list-item-box-view1">
						<view class="list-item-box-view1-view">
							<text v-for="(tab,i) in item.specifications" :key="i">{{tab}}</text>
							<image src="../../static/xiala@2x.png" mode=""></image>
						</view>
					</view>
					<view class="list-item-box-view1">
						<view class="list-item-box-view1-view">
							<text>剩余库存：{{item.inventory}}</text>
						</view>
					</view>
					<view class="list-item-box-view-ziti" v-if="item.isSince">支持自提</view>
					<view class="list-item-box-view2">
						<text class="list-item-box-view2-text">￥{{item.newPrice}}</text>
						<view class="list-item-box-view2-number">
							<view class="list-item-box-view2-number-view" @click.stop="handleoperation(-1,item.specificationId,item.number)">
								<image src="../../static/sl_jian@2x.png" mode=""></image>
							</view>
							
							<text>{{item.number}}</text>
							<view class="list-item-box-view2-number-view" @click.stop="handleoperation(1,item.specificationId,item.number)">
								<image src="../../static/sl_jia@2x.png" mode="" ></image>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box-bottom">
			<view class="box-bottom-left" @click="handlequanxuan">
				<image v-if="allChecked" class="list-item-image" src="../../static/xz_2@2x.png" mode=""></image>
				<image v-else class="list-item-image" src="../../static/xz_1@2x.png" mode=""></image>
				<text>全选</text>
			</view>
			<view class="box-bottom-right">
				<view class="box-bottom-right-box">
					<text class="box-bottom-right-box-text">总计：￥{{data?data.sumPrice : 0}}</text>
					<text class="box-bottom-right-box-text1">已选 {{data?data.checkCount : 0}} 件</text>
				</view>
				<view class="box-bottom-right-box1" @click="$u.throttle(handlejiesuan, 1000)">
					立即结算
				</view>
			</view>
		</view>
		<button open-type="contact" class="box-xuanfu">
			<image src="../../static/kf_wx@2x.png" mode="" ></image>
		</button>
		<u-mask :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="tishi">
						提示
					</view>
					<view class="rect-content">
						确定删除吗？
					</view>
					<view class="xian-box">
						<view class="xian">
							
						</view>
					</view>
					<view class="rect-btn">
						<view class="quxiao"  @click="show = false">
							取消
						</view>
						<view class="queding"  @click="sumbit">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		
		<!-- 出现自提混搭商品 -->
		<u-mask :show="show1" @click="show1 = false">
			<view class="warp">
				<view class="rect-ziti" @tap.stop>
					<view class="fenzu-title">请分开结算以下商品</view>
					<view class="fenzu-item" v-for="(item,index) in fenzuList" :key="index">
						<view class="fenzu-item-title">{{item.title}}</view>
						<view class="fenzu-item-content">{{item.subheading}}</view>
						<view class="fenzu-item-image">
							<image v-for="(tab,i) in item.goodsImgList" :key="i" :src="tab" mode="aspectFill"></image>
						</view>
						<view class="fenzu-item-btn">
							<view class="fenzu-item-btn-left">总计：￥{{item.total}}</view>
							<view class="fenzu-item-btn-right" @click="handlefenzulijijiesuan(item.groupBySettlementId)">立即结算</view>
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<u-tabbar :list="tabbar" :mid-button="false" icon-size='45' active-color="#3E3E3E" inactive-color="#3E3E3E" :before-switch="beforeSwitch"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:'',
				allChecked:true,
				tabbar:[{
						iconPath: "/static/tab_sy_1.png",
						selectedIconPath: "/static/tab_sy_2.png",
						text: '首页',
						pagePath: "/pages/index/index"
					},{
						iconPath: "/static/tab_fl_1.png",
						selectedIconPath: "/static/tab_fl_2.png",
						text: '嗨美商城',
						pagePath: "/pages/fenlei/fenlei"
					},
					{
						iconPath: "/static/tab_gwd_1.png",
						selectedIconPath: "/static/tab_gwd_2.png",
						text: '购物车',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: "/pages/gouwudai/gouwudai"
					},
					{
						iconPath: "/static/tab_wd_1.png",
						selectedIconPath: "/static/tab_wd_2.png",
						text: '会员中心',
						pagePath: "/pages/wode/wode"
					},
				],
				id:'',
				show:false,
				isflag:true,
				show1:false,
				fenzuList:[],
				share:uni.getStorageSync('share')
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getCartList()
			this.getCartCount()
		},
		methods: {
			//购物袋数量
			async getCartCount(){
				const res = await this.$u.api.getCartCount()
				console.log(res,'购物车数量')
				this.tabbar[2].count = res.data
			},
			//购物袋列表
			async getCartList(){
				const res= await this.$u.api.cartList()
				this.data = res.data
				if (this.data.list.length == 0) {
					this.allChecked = false
				}else{
					var a = 1
					this.data.list.forEach(v=>{
						if (!v.checked) {
							a = 2
							return
						}
					})
					console.log(a)
					if(a == 2){
						this.allChecked = false
					}else{
						this.allChecked = true
					}
				}
				
			},
			//数量加减
			async handleoperation(data,specificationId,number){
				console.log(data,'data')
				console.log(specificationId,'specificationId')
				console.log(number,111)
				if (number == 1 && data == -1) {
					this.$u.toast('数量最少为1')
				} else{
					console.log(data)
					const params = {
						specificationId:specificationId,
						number:number + data
					}
					const res = await this.$u.api.addOrReduceCart(params)
					this.getCartList()
				}
			},
			//删除商品
			async handledel(id){
				this.id = id
				this.show = true
			},
			//删除商品
			async sumbit(){
				
				const cartIds = []
				cartIds.push(this.id)
				const params = {
					cartIds:cartIds
				}
				const res = await this.$u.api.delCart(params)
				this.$u.toast(res.msg)
				this.show = false
				this.getCartList()
				this.getCartCount()
			},
			//单个商品选中或者不选中
			async handlechecked(id,checked){
				const cartIds = []
				cartIds.push(id)
				const params = {
					cartIds:cartIds,
					checkStatus:checked
				}
				const res = await this.$u.api.cartCheckStatus(params)
				if (res.code == 0) {
					this.getCartList()
				}
			},
			//全选 全不选
			async handlequanxuan(){
				if (this.data.list.length > 0) {
					const params = {
						cartIds:this.data.list.map(item => item.id),
						checkStatus:!this.allChecked
					}
					const res = await this.$u.api.cartCheckStatus(params)
					if (res.code == 0) {
						this.getCartList()
						this.allChecked = !this.allChecked
					}
				}
				
			},
			//商品详情
			handledetail(goodsId){
				const params = 'goodsId=' + goodsId
				uni.navigateTo({
					url:'/pages/shangpinxiangqing/shangpinxiangqing?' + params
				})
			},
			//结算
			async handlejiesuan(){
				const params = {
					cartBuy:true
				}
				const res = await this.$u.api.confirmOrder(params)
				if (res.code == 0) {
					const params = 'type=' + 1
					uni.navigateTo({
						url:'/pages/querendingdan/querendingdan?' + params
					})
				}else if(res.code == 900){
					this.show1 = true
					this.fenzuList = res.data
				} else{
					this.$u.toast(res.msg)
				}
				
			},
			//分组立即结算
			handlefenzulijijiesuan(groupBySettlementId){
				this.show1 = false
				const params = 'type=' + 1 + '&groupBySettlementId=' + groupBySettlementId
				uni.navigateTo({
					url:'/pages/querendingdan/querendingdan?' + params
				})
			},
			//逛一逛
			handleguangguang(){
				uni.switchTab({
					url:'/pages/fenlei/fenlei'
				})
			},
			//切换之前回调
			async beforeSwitch(index){
				if (index == 2 || index == 3) {
					const res = await this.$u.api.getUserInfo()
					return true
				}
			}
		}
	}
</script>
<style>
	.u-badge--bg--error.data-v-2b1712d8{
		background: #5D22BA !important;
	}
</style>
<style scoped lang="scss">
    .slot-wrap {
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	/* 如果您想让slot内容占满整个导航栏的宽度 */
    	// flex: 1;
    	/* 如果您想让slot内容与导航栏左右有空隙 */
    	padding-left: 316rpx;
    }
    .slot-wrap image{
    	width: 116rpx;
    	height: 36rpx;
    }
	.kong{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 140rpx;
	}
	.kong image{
		width: 116rpx;
		height: 36rpx;
	}
	.kong-view{
		padding: 120rpx 0rpx 28rpx 0rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 38rpx;
	}
	.kong-view1{
		padding-bottom: 48rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.kong-view2{
		width: 256rpx;
		height: 92rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 92rpx;
		text-align: center;
	}
	.list{
		padding: 28rpx 28rpx 114rpx 28rpx;
	}
	.list-title{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-bottom: 26rpx;
	}
	.list-title-text{
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 38rpx;
	}
	.list-title-text1{
		margin-left: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.list-item{
		padding: 40rpx 0rpx;
        border-bottom: 0.5px solid #E3E3E3;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.xz-view{
		width: 60rpx;
		height: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.list-item-image{
		width: 36rpx;
		height: 36rpx;
	}
	.list-item-goodsphoto{
		margin: 0rpx 16rpx 0rpx 10rpx;
		width: 208rpx;
		height: 204rpx;
		position: relative;
	}
	.list-item-goodsphoto-image{
		width: 208rpx;
		height: 204rpx;
	}
	.list-item-goodsphoto-image1{
		width: 130rpx;
		height: 130rpx;
		position: absolute;
		top: 34rpx;
		left: 34rpx;
	}
	.list-item-box{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
		height: 204rpx;
	}
	.list-item-box-view{
		display: flex;
		align-items: center;
		justify-content: space-between;
		align-items: flex-start;
	}
	.list-item-box-view text{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 32rpx;
	}
	.list-item-box-view-del{
		width: 60rpx;
		height: 50rpx;
		display: flex;
		flex-direction: row;
		margin-left: 20rpx;
	}
	.list-item-box-view image{
		margin-left: 20rpx;
		margin-top: 4rpx;
		width: 28rpx;
		height: 28rpx;
	}
	.list-item-box-view1{
		display: flex;
		flex-direction: row;
	}
	
	.list-item-box-view1-view{
		padding: 2rpx 8rpx;
		background: #F4F4F4;
		border-radius: 4px 4px 4px 4px;
		display: flex;
		flex-direction: row;
		align-items: center;
		
	}
	.list-item-box-view1-view text{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 28rpx;
		margin-right: 8rpx;
	}
	.list-item-box-view1-view image{
		margin-left: 12rpx;
		width: 12rpx;
		height: 10rpx;
	}
	.list-item-box-view-ziti{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #5D22BA;
		line-height: 28rpx;
	}
	.list-item-box-view2{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.list-item-box-view2-text{
		font-size: 32rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #333333;
		line-height: 38rpx;
	}
	.list-item-box-view2-number{
		width: 150rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-right: 28rpx;
	}
	.list-item-box-view2-number-view{
		width: 80rpx;
	    height: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.list-item-box-view2-number image{
		width: 28rpx;
		height: 28rpx;
	}
	.list-item-box-view2-number text{
		font-size: 28rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
		margin: 0rpx 10rpx;
	}
	.box-bottom{
		width: 750rpx;
		height: 104rpx;
		padding: 8rpx 28rpx 8rpx 28rpx;
		position: fixed;
		left: 0;
		bottom: calc(100rpx + env(safe-area-inset-bottom));
		// bottom: 108rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background: white;
	}
	.box-bottom-left{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.box-bottom-left text{
		margin-left: 26rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.box-bottom-right{
		display: flex;
		flex-direction: row;
	}
	.box-bottom-right-box{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: space-between;
	}
	.box-bottom-right-box-text{
		font-size: 34rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 38rpx;
	}
	.box-bottom-right-box-text1{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 28rpx;
	}
	.box-bottom-right-box1{
		margin-left: 16rpx;
		width: 256rpx;
		height: 92rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 92rpx;
		text-align: center;
	}
	
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.rect {
		width: 80%;
		// background: #081945;
		// box-shadow: inset 0px 0px 25px 0px #045174;
		background: white;
		border-radius: 10px 10px 10px 10px;
		border-radius: 10px;
	}
	.tishi{
		padding: 30rpx 0rpx 20rpx 0rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 42rpx;
	}
	.rect-content{
		padding: 30rpx 0rpx 40rpx 0rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 42rpx;
		border-bottom: 0.5px solid rgba(0,0,0,0.05);
	}
	.xian-box{
		padding: 0rpx 30rpx;
	}
	.xian{
		width: 100%;
		height: 0px;
		opacity: 0.2;
		border: 0.5rpx solid #FFFFFF;
	}
	.rect-btn{
		display: flex;
		flex-direction: row;
		padding: 40rpx 0rpx 40rpx 0rpx;
	}
	.quxiao{
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #666666;
		line-height: 42rpx;
	}
	.queding{
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
	}
	
	.warp {
		width: 100%;
		height: 100%;
		position: relative;
	}
	.rect-ziti{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 800rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 28rpx 28rpx 40rpx 28rpx;
	}
	.fenzu-title{
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #BD0632;
		line-height: 40rpx;
	}
	.fenzu-item{
		padding: 28rpx 0rpx;
	}
	.fenzu-item-title{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 32rpx;
	}
	.fenzu-item-content{
		padding-top: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 28rpx;
	}
	.fenzu-item-image{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.fenzu-item-image image{
		width: 88rpx;
		height: 88rpx;
		border-radius: 8px;
		margin: 10rpx 10rpx 0rpx 0rpx;
	}
	.fenzu-item-btn{
		padding-top: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.fenzu-item-btn-left{
		font-size: 28rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 500;
		color: #BD0632;
		line-height: 36rpx;
	}
	.fenzu-item-btn-right{
		width: 232rpx;
		height: 80rpx;
		background: #BD0632;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ffffff;
		line-height: 80rpx;
		text-align: center;
	}
	
	.box-xuanfu{
		display: flex;
		flex-direction: column;
		position: fixed;
		right: 15rpx;
		bottom: 300rpx;
		background: none;
		margin: 0;
	}
	.box-xuanfu::after{
		border: none;
	}
	.box-xuanfu image{
		width: 88rpx;
		height: 88rpx;
	}
</style>
